<template>
  <div class="mt-3 mb-5">
    <NGradientText type="success" class="fs-3">举报管理</NGradientText> ———— 一个处理举报的地方,啊~
    权力的颜色
  </div>

  <div>
    <NTabs :value="activeTab" @update:value="handleMenuClick">
      <NTabPane name="1" tab="帖子"></NTabPane>
      <NTabPane name="2" tab="帖子评论"></NTabPane>
    </NTabs>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { NGradientText, NTabPane, NTabs } from 'naive-ui'
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()
const activeTab = ref('1')

const toPage = (name: string) => {
  if (name === '1') {
    router.push('/admin/main/report/message')
  } else if (name === '2') {
    router.push('/admin/main/report/report')
  }
}

const handleMenuClick = (name: string) => {
  activeTab.value = name
  toPage(name)
}

// 监听路由变化，自动切换 tab
watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes('message')) {
      activeTab.value = '1'
    } else if (newPath.includes('report')) {
      activeTab.value = '2'
    }
  },
)

onMounted(() => {
  // 初始化时根据当前路径设置 activeTab
  const currentPath = route.path
  if (currentPath.includes('message')) {
    activeTab.value = '1'
  } else if (currentPath.includes('report')) {
    activeTab.value = '2'
  }
  toPage(activeTab.value)
})
</script>

<style scoped></style>
